<template>
<!-- 聊天室 -->
  <div class="chatroom" ref="chatroom">
    <!-- 标题栏 -->
    <title-bar class="header"/>
    <!-- 内容 -->
    <div class="msgs">
      <chat-box v-for="(msg, index) in msgs" :key="index" :msg="msg"/>
    </div>
    <!-- 跳动的信封 -->
    <letter @click.native="genMsg"/>
  </div>
</template>

<script>
import ChatBox from './ChatBox.vue'
import TitleBar from './TitleBar.vue'
import Letter from './Letter.vue'
const axios = require('axios');
export default {
	components: { ChatBox, TitleBar, Letter },
  data(){
    return {
      msgs: []
    }
  },
  methods: {
    async genMsg(){
      setInterval(async () => {
        const text = (await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')).data.content
        this.msgs.push(text)
        // 滚动到最底部
        this.$nextTick(() => {
          this.$refs.chatroom.scrollTop = this.$refs.chatroom.scrollHeight - this.$refs.chatroom.clientHeight
        })
      }, 3000);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .chatroom{
    background: url('../assets/bg.jpg');
    background-size: cover;
    height: 100vh;
    overflow: scroll;
  }

  .msgs {
    padding: 60px 0;
  }

  .header {
    position: fixed;
    top:0;
    z-index: 1;
    width: 100%;
  }
</style>
